<!--
 * @description: 登录【蓝色风格】
 * @author: yuanluya
 * @version: 1.0
 * @createDate:2023-12-06 
 * @updateDate:2023-12-06
-->
<template>
	<div class="login-container flex" style="padding: 5%">
		<div class="flex-item flex boxShaow" style="border-radius: 3rem">
			<div class="login-right flex">
				<div class="login-right-warp flex-margin">
					<span class="login-right-warp-one"></span>
					<span class="login-right-warp-two"></span>
					<div class="login-right-warp-main">
						<div class="login-right-warp-main-title">{{ getThemeConfig.globalTitle }}</div>
						<div class="login-right-warp-main-form flex">
							<div v-if="!state.isScan">
								<el-tabs v-model="state.tabsActiveName">
									<el-tab-pane :label="$t('message.label.one1')" name="account">
										<Account />
									</el-tab-pane>
									<el-tab-pane :label="$t('message.label.two2')" name="mobile">
										<Mobile />
									</el-tab-pane>
								</el-tabs>
							</div>
							<div class="flex-item flex" style="align-items: center; justify-content: space-around">
								<Scan v-if="state.isScan" />
							</div>
							<div class="login-content-main-scan" @click="state.isScan = !state.isScan">
								<i class="iconfont" :class="state.isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
								<div class="login-content-main-scan-delta"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="login-left flex-margin flex" style="align-items: center; flex-direction: column">
				<div class="login-left-logo">
					<img :src="logoMini" style="width: 100px; height: 64px" />
					<div class="login-left-logo-text">
						<span>{{ getThemeConfig.globalViceTitle }}</span>
						<span class="login-left-logo-text-msg">{{ getThemeConfig.globalViceTitleMsg }}</span>
					</div>
				</div>
				<el-carousel height="500px" style="width: 100%">
					<el-carousel-item>
						<img :src="loginIconTwo" class="login-icon-group-icon" />
					</el-carousel-item>
					<el-carousel-item>
						<img :src="loginIconTwo1" class="login-icon-group-icon" />
					</el-carousel-item>
					<el-carousel-item>
						<img :src="loginIconTwo2" class="login-icon-group-icon" />
					</el-carousel-item>
				</el-carousel>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { defineAsyncComponent, onMounted, reactive, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';
import logoMini from '/@/assets/logo-mini.svg';
import loginIconTwo from '/@/views/login/img/loginImg01.png';
import loginIconTwo1 from '/@/views/login/img/loginImg02.png';
import loginIconTwo2 from '/@/views/login/img/loginImg03.png';

// 引入组件
const Account = defineAsyncComponent(() => import('/@/views/login/component/account2.vue'));
const Mobile = defineAsyncComponent(() => import('/@/views/login/component/mobile.vue'));
const Scan = defineAsyncComponent(() => import('/@/views/login/component/scan.vue'));
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const state = reactive({
	tabsActiveName: 'account',
	isScan: false,
});
// 获取布局配置信息
const getThemeConfig = computed(() => {
	return themeConfig.value;
});
// 页面加载时
onMounted(() => {
	NextLoading.done();
});
</script>

<style scoped lang="scss">
.flex {
	// display: -webkit-box;
	display: -webkit-flex;
}
.flex-item {
	flex: 1;
	min-width: 0;
}
.boxShaow {
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
}
.login-container {
	height: 100vh;
	background-color: #caf4fd;
	// background-image: radial-gradient(closest-side, rgb(232, 49, 13), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgb(7, 92, 75), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgb(64, 145, 14), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgb(234, 135, 7), rgba(170, 142, 245, 0));
	background-image: radial-gradient(closest-side, rgb(190, 249, 253), rgba(125, 254, 254, 0)), radial-gradient(closest-side, rgb(102, 132, 237), rgba(133, 245, 247, 0)),
		radial-gradient(closest-side, rgb(153, 189, 242), rgba(237, 250, 254, 0)), radial-gradient(closest-side, rgb(230, 243, 248), rgba(207, 242, 248, 0));
	background-size:
		130vw 130vh,
		120vw 120vh,
		100vw 150vh,
		120vw 130vh;
	background-position:
		-80vw -80vh,
		30vw -20vh,
		-20vw 20vh,
		30vw 20vh;
	background-repeat: no-repeat;
	animation: 5s moiveAnimation infinite;
	@keyframes moiveAnimation {
		0%,
		100% {
			background-size:
				130vw 130vh,
				120vw 120vh,
				100vw 150vh,
				120vw 130vh;
			background-position:
				-80vw -80vh,
				30vw -20vh,
				-20vw 20vh,
				30vw 20vh;
		}
		25% {
			background-size:
				120vw 120vh,
				130vw 150vh,
				130vw 120vh,
				100vw 110vh;
			background-position:
				-30vw -30vh,
				40vw -10vh,
				0vw 10vh,
				-10vw 20vh;
		}
		50% {
			background-size:
				130vw 130vh,
				140vw 100vh,
				100vw 150vh,
				90vw 110vh;
			background-position:
				10vw -60vh,
				20vw 10vh,
				10vw 30vh,
				10vw -20vh;
		}
		75% {
			background-size:
				140vw 140vh,
				100vw 130vh,
				100vw 150vh,
				130vw 110vh;
			background-position:
				-70vw -70vh,
				0vw -10vh,
				30vw -20vh,
				20vw 30vh;
		}
	}
	.login-left {
		flex: 1;
		// position: relative;
		// background-color: rgba(211, 239, 255, 1);
		// margin-right: 100px;
		.login-left-logo {
			display: flex;
			align-items: center;
			// position: absolute;
			// top: 50px;
			// left: 80px;
			z-index: 1;
			animation: logoAnimation 0.3s ease;
			img {
				width: 100px;
				height: 64px;
			}
			.login-left-logo-text {
				display: flex;
				flex-direction: column;
				span {
					margin-left: 10px;
					font-size: 30px;
					font-weight: 700;
					color: var(--el-color-primary);
				}
				.login-left-logo-text-msg {
					font-size: 12px;
					color: var(--el-color-primary);
				}
			}
		}
		.login-icon-group-icon {
			width: 500px;
			height: 500px;
			margin: 0 auto;
			display: block;
			// position: absolute;
			// left: 10%;
			// top: 50%;
			// transform: translateY(-50%) translate3d(0, 0, 0);
		}
	}
	.login-right {
		width: 700px;
		z-index: 9;
		.login-right-warp {
			border: 1px solid var(--el-color-primary-light-3);
			// border-radius: 3px;
			border-radius: 2rem;
			width: 460px;
			height: 550px;
			position: relative;
			overflow: hidden;
			background-color: var(--el-color-white);
			.login-right-warp-one,
			.login-right-warp-two {
				position: absolute;
				display: block;
				width: inherit;
				height: inherit;
				&::before,
				&::after {
					content: '';
					position: absolute;
					z-index: 1;
				}
			}
			.login-right-warp-one {
				&::before {
					filter: hue-rotate(0deg);
					top: 0px;
					left: 0;
					width: 100%;
					height: 1px;
					background: linear-gradient(90deg, transparent, var(--el-color-primary));
					animation: loginLeft 3s linear infinite;
				}
				&::after {
					filter: hue-rotate(0deg);
					top: -100%;
					right: 2px;
					width: 1px;
					height: 100%;
					background: linear-gradient(180deg, transparent, var(--el-color-primary));
					animation: loginTop 3s linear infinite;
					animation-delay: 0.7s;
				}
			}
			.login-right-warp-two {
				&::before {
					filter: hue-rotate(0deg);
					bottom: 2px;
					right: -100%;
					width: 100%;
					height: 1px;
					background: linear-gradient(270deg, transparent, var(--el-color-primary));
					animation: loginRight 3s linear infinite;
					animation-delay: 1.4s;
				}
				&::after {
					filter: hue-rotate(0deg);
					bottom: -100%;
					left: 0px;
					width: 1px;
					height: 100%;
					background: linear-gradient(360deg, transparent, var(--el-color-primary));
					animation: loginBottom 3s linear infinite;
					animation-delay: 2.1s;
				}
			}
			.login-right-warp-main {
				display: flex;
				flex-direction: column;
				height: 100%;
				.login-right-warp-main-title {
					height: 100px;
					line-height: 100px;
					font-size: 32px;
					font-weight: 800;
					text-align: center;
					//letter-spacing: 3px;
					animation: logoAnimation 0.3s ease;
					animation-delay: 0.3s;
					color: var(--el-color-primary);
				}
				.login-right-warp-main-form {
					flex: 1;
					padding: 0 50px 50px;
					// align-items: center;
					.login-content-main-scan {
						position: absolute;
						top: 0;
						right: 0;
						width: 50px;
						height: 50px;
						overflow: hidden;
						cursor: pointer;
						transition: all ease 0.3s;
						color: var(--el-color-primary);
						&-delta {
							position: absolute;
							width: 35px;
							height: 70px;
							z-index: 2;
							top: 2px;
							right: 21px;
							background: var(--el-color-white);
							transform: rotate(-45deg);
						}
						&:hover {
							opacity: 1;
							transition: all ease 0.3s;
							color: var(--el-color-primary) !important;
						}
						i {
							width: 47px;
							height: 50px;
							display: inline-block;
							font-size: 48px;
							position: absolute;
							right: 1px;
							top: 0px;
						}
					}
				}
			}
		}
	}
}

.icon {
	overflow: hidden; //配合相对布局，将原图溢出容器并隐藏
	display: inline-block;
}
/* 页面宽度小于768px*/
@media screen and (max-width: 1200px) {
	.login-left {
		display: none;
	}
}
</style>
